<template>
  <div class="SilderNav">
    <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      style="width: 256px"
      mode="inline"
    >
      <template v-for="item in menusData">
        <template v-if="!item.children">
          <a-menu-item :key="item.category_id">
            <custom-icon :type="`icon-${item.category_url}`"  />
            {{ item.category_name }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :key="item.category_id" :menu-info="item" />
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script>
  export default {
    name: 'SilderNav',
    props: {
      menusData: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        openKeys: [],
        selectedKeys: [],
      }
    },
  }
</script>

<style lang="less" scoped>
.SilderNav{

}
</style>